<template>
  <div>
    <div class="slider" :class="{'interact-disabled': pageData.isLoading}">
      <div class="content">
        <div class="bg-img-div">
          <img id="bg-img" :src="pageData.zhutuPic" alt="" />
        </div>
        <div class="slider-img-div" :style="pageData.sliderImgStyle" >
          <img id="slider-img" :src="pageData.futuPic" alt="" />
        </div>
      </div>
      <div class="slider-move" @mousemove="htouchmove" @mouseup="touchEnd">
        <div class="slider-move-track">
          拖动滑块完成拼图
        </div>
        <div class="slider-move-btn" :style="pageData.sliderBtnStyle" @mousedown="touchstart"></div>
      </div>
      <div class="bottom">
        <div class="refresh-btn" @click="reset"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { onMounted, reactive, defineComponent } from "vue";
import request from 'src/utils/request'

export default defineComponent({
  setup(props, { emit }) {
    const pageData = reactive({
      baseUrl: '',
      zhutuPic: '', //主图
      futuPic: '', //缺口图
      x: 10, //当前的位置
      oldX: 10,
      msg: '安全验证', //提示信息
      msgColor: '',
      showLoading: true,
      id: '',
      start: 0,
      startY: 0,
      trackArr: [],
      startSlidingTime: new Date(),
      entSlidingTime: '',
      sliderImgStyle: { "transform": "translate(0px, 0px)" },
      sliderBtnStyle: { "transform": "translate(0px, 0px)", "background-position": "-5px 11.79625%" }
    })


    onMounted(() => {
      shuaxin()
    })

    const captchaGenCaptcha = async () => request({ url: '/infra/captcha/genCaptcha', method: 'get' })
    const captchaCheckCaptcha = (params, config = {}) => request({ url: '/infra/captcha/checkCaptcha', method: 'post', data: params })
    let shuaxin = async () => {
      const data = (await captchaGenCaptcha()).data;
      pageData.zhutuPic = data.captcha.backgroundImage;
      pageData.futuPic = data.captcha.sliderImage;
      pageData.id = data.id;
      pageData.showLoading = false

    }

    let touchstart = (e) => {
      pageData.startSlidingTime = new Date();
      pageData.start = e.pageX;
      pageData.startY = e.pageY;
      pageData.sliderBtnStyle["background-position"] = "-5px 31.0092%"
      pageData.isDragging = true
    }
    let htouchmove = (e) => {
      if (!pageData.isDragging) return;
      let pageX = e.pageX;
      let pageY = e.pageY;
      let moveX = Math.min(Math.max(0,pageX - pageData.start),260 - 48);
      pageData.trackArr.push({
        x: pageX - pageData.start,
        y: pageY - pageData.startY,
        t: new Date().getTime() - pageData.startSlidingTime.getTime()
      });
      // console.log(pageX,this.start)
      pageData.sliderBtnStyle.transform = "translate(" + moveX + "px, 0px)"
      pageData.sliderImgStyle.transform = "translate(" + moveX + "px, 0px)"
    }

    let touchEnd = async (e) => {
      // console.log(parseInt(this.x * (679 / uni.upx2px(550))))
      // console.log(e, 123);
      pageData.isDragging = false
      pageData.isLoading = true
      pageData.msg = '验证中...';
      pageData.msgColor = '';
      let d = new Date().getTime();
      let params = {
        id: pageData.id,
        track: {
          bgImageHeight: 155,
          bgImageWidth: 254,
          entSlidingTime: d,
          sliderImageHeight: 155,
          sliderImageWidth: 46,
          startSlidingTime: pageData.startSlidingTime.getTime(),
          trackList: pageData.trackArr
        }
      };
      // console.log(d)
      try {
        const data = (await captchaCheckCaptcha(params)).data;
        if (data) {
          emit('success', pageData.id);
        } else {
          pageData.msg = '安全验证'
          pageData.x = pageData.oldX
          pageData.x = 10;
          alert('验证失败')
        }
      } catch (error) {
        alert(error.message)
      } finally {
        reset()
      }
    }

    let reset = () => {
      pageData.x = 10;
      pageData.isLoading = false;
      pageData.isDragging = false;
      pageData.id = '';
      pageData.start = 0
      pageData.startY = 0
      pageData.trackArr = []
      pageData.startSlidingTime = new Date()
      pageData.entSlidingTime = ''
      pageData.sliderImgStyle = { "transform": "translate(0px, 0px)" }
      pageData.sliderBtnStyle = { "transform": "translate(0px, 0px)", "background-position": "-5px 11.79625%" }
      shuaxin()
    }
    return {
      pageData,
      touchstart,
      htouchmove,
      touchEnd,
      reset
    }
  }
})

</script>

<style scoped>
svg {
  display: block;
  width: 100%;
  height: 100%;
}

.slider {
  background-color: #fff;
  width: 260px;
  height: 267px;
  z-index: 999;
  box-sizing: border-box;
}

.slider .content {
  width: 100%;
  height: 159px;
  position: relative;
}

.bg-img-div {
  width: 100%;
  height: 100%;
  position: absolute;
  transform: translate(0px, 0px);
}

.slider-img-div {
  height: 100%;
  position: absolute;
  transform: translate(0px, 0px);
}

.bg-img-div img {
  width: 100%;
}

.slider-img-div img {
  height: 100%;
}

.slider .slider-move {
  height: 60px;
  width: 100%;
  margin: 11px 0;
  position: relative;
}

.slider .bottom {
  height: 19px;
  padding: 0 8px;
  width: 100%;
}

.refresh-btn,
.close-btn,
.slider-move-track,
.slider-move-btn {
  background: url('src/assets/sprite.1.2.4.png') no-repeat;
}

.refresh-btn,
.close-btn {
  display: inline-block;
}

.slider-move .slider-move-track {
  line-height: 38px;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
  color: #88949d;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.slider {
  user-select: none;
}

.slider-move .slider-move-btn {
  transform: translate(0px, 0px);
  background-position: -5px 11.79625%;
  position: absolute;
  top: -12px;
  left: 0;
  width: 66px;
  height: 66px;
}

.slider-move-btn:hover,
.close-btn:hover,
.refresh-btn:hover {
  cursor: pointer
}

.bottom .close-btn {
  width: 20px;
  height: 20px;
  background-position: 0 44.86874%;
}

.bottom .refresh-btn {
  width: 20px;
  height: 20px;
  background-position: 0 81.38425%;
}

.after {
  color: #88949d;
}

.interact-disabled {
  user-select: none;
  pointer-events: none;
}
</style>